<layout:basic/>

<component:application.module.admin.library.component.Datatable id="menulist" title="菜单管理" width="12">
    <button id="addmenu" class="btn btn-default"><i class="fa fa-plus"></i> 添加菜单</button>
    <button id="refreshmenu" class="btn btn-default"><i class="fa fa-refresh"></i> 刷新列表</button>
</component:application.module.admin.library.component.Datatable>

<div id="mlModal" style="display: none">
    <form class="form-horizontal" role="form" id="mlForm">
        <div class="form-group">
            <label class="col-sm-4 control-label">名称</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="name">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">值</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="value">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">父ID</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="pid" data-default="0">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">fa图标</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="icon" data-default="square-o">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">排序</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="orderNo" data-default="0">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">目标</label>
            <div class="col-sm-4">
                <select class="form-control" name="target" data-default="_self">
                    <option value="_self">本页</option>
                    <option value="_blank">新页</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-4 control-label">分类</label>
            <div class="col-sm-4">
                <select class="form-control" name="category">
                    <option value="0">侧边栏菜单</option>
                </select>
            </div>
        </div>
        <input name="id" type="hidden">
    </form>
</div>
<script>
    $(function () {
        var page = (function () {
            return {
                onclick: {
                    ".act-addsub": function (ele, dtables, modal, form) {
                        var row = $(ele).closest("tr");
                        var rowdata = dtables.data(row);
                        rowdata.pid = rowdata.id;
                        rowdata.name = rowdata.value = "";
                        isea.form.fill(form, rowdata);// 继承父菜单
                        modal.onConfirm(function () {
                            var data = form.serialize();
                            $.get("__PUBLIC__/admin/menu/add", data, function (data) {
                                isea.notify.show(data.message);
                                if (data.status) {
                                    modal.hide();
                                    dtables.load(data.data, false);
                                }
                            });
                        }).show();
                    },
                    ".act-setauth": function (ele, dtables) {
                        var row = $(ele).closest("tr");
                        var rowdata = dtables.data(row);
                        $.get("__PUBLIC__/admin/access/add", {
                            name: rowdata.name,
                            value: rowdata.value,
                            disable: 1, /* 初始状态为禁用 */
                            comment: ""
                        }, function (data) {
                            if (data.status) {
                                rowdata.aid = data.data.id;
                                console.log(rowdata, row);
                                dtables.update(rowdata, row);
                            }
                        });
                    }
                },
                selector: {
                    /** 选择器 */
                    modal: "#mlModal",
                    table: "#menulist",
                    form: "#mlForm",
                    /** 事件触发器 */
                    trigger: {
                        /** 表格外部*/
                        add: "#addmenu",
                        refresh: "#refreshmenu",
                        /** 表格内部：元素直接相关 */
                        update: ".act-update",
                        remove: ".act-delete"
                    }
                },
                tableOptions: {
                    onselect: 0,//单选择或者多选择
                    config: {
                        language: {
                            emptyTable: '没有数据',
                            loadingRecords: '加载中...',
                            processing: '查询中...',
                            search: '检索:',
                            lengthMenu: '每页 _MENU_ 记录',
                            zeroRecords: '没有数据',
                            paginate: {
                                first: '<<',
                                last: '>>',
                                next: '>',
                                previous: '<'
                            },
                            info: '第 _PAGE_ 页 / 总 _PAGES_ 页 / 总 _TOTAL_ 记录',
                            infoEmpty: '没有数据',
                            infoFiltered: '(过滤总数 _MAX_ 记录)'
                        },
                        paging: true,
                        lengthChange: false,
                        searching: true,
                        ordering: true,
                        order: [], /* 重要：禁止了自动排序id*/
                        info: true,
                        autoWidth: false,
                        lengthMenu: [[-1], ["全部"]],
                        columns: [
                            {
                                title: 'ID',
                                data: 'id',
                                width: "2%"
                            },
                            {
                                title: '名称',
                                data: function (row) {
                                    if (!row.level) row.level = 0;
                                    var level = parseInt(row.level), name = row.name;
                                    if (level === 0) {
                                    } else {
                                        name = isea.util.repeat("&emsp;&emsp;", level) + '├── ' + name;
                                        /* 全角空格 */
                                    }
                                    return name;
                                },
                                width: "24%"
                            },
                            {
                                title: '父菜单ID',
                                data: 'pid',
                                width: "12%"
                            },
                            {
                                title: '菜单值',
                                data: 'value',
                                width: "6%"
                            },
                            {
                                title: '排序',
                                data: 'orderNo',
                                width: "6%"
                            },
                            {
                                title: '图标',
                                data: function (row) {
                                    return row.icon ? "<i class='fa fa-" + row.icon + "'></i>" : "";
                                },
                                width: "8%"
                            },
                            {
                                title: '分类',
                                data: function (row) {
                                    switch (parseInt(row.category)) {
                                        case 0:
                                            return "侧边栏";
                                        default:
                                            return " - ";
                                    }
                                },
                                width: "6%"
                            }, {
                                title: '操作',
                                data: function (row) {
                                    var html = "<button class='btn btn-default btn-xs act-update'>修改</button> " +
                                        "<button class='btn btn-danger btn-xs act-delete'>删除</button> " +
                                        "<button class='btn btn-primary btn-xs act-addsub'>添加子菜单</button> ";
                                    if ((0 === row.aid) && ("" !== row.value)) {
                                        html += "<button class='btn btn-danger btn-xs act-setauth'>设置权限</button>";
                                    }
                                    return html;
                                },
                                width: "16%"
                            }
                        ]
                    }
                },
                url: {
                    /** 增删改查URL地址 */
                    update: "__PUBLIC__/admin/menu/update",
                    remove: "__PUBLIC__/admin/menu/delete",
                    refresh: "__PUBLIC__/admin/menu/getlist",
                    add: "__PUBLIC__/admin/menu/add"
                }
            }
        })();

        isea.bundle.init("table", page);
    });
</script>
